<template>
	<view class="check">
		<!-- 自定义头部 -->
		<view class="header-top-box">
			<view class="header-top fff flexbetween">
				<view class="top-image" @click="gotoBack()"></view>
				<view class="searchinput flexleft">
					<view class="searchimg"></view>
					<input type="text" placeholder="请输入内容">
				</view>
				<view class="nostrongtext" style="margin-top: 20rpx;">搜索</view>
			</view>
		</view>
		<!-- 下拉选项 -->
		<view class="tab">
			  <!-- 左边下拉 -->
			  <view class="Leftdown">
			  	<!-- 选项 -->
			   <view class="dadoption">
			  	<view class="option" @click="optionput(2)">
			  		<view :class="v2"></view>
			  		<view class="v2">火锅配料</view>
			  		<view class="v3">7</view>
			  	</view>
			  	<view :class="classop2" @click="optionput(1)">
			  		<view :class="v1"></view>
			  		<view class="v2">豆制品</view>
			  	</view>
			  	<view :class="classop3">
			  		<view class="v2">汽水</view>
			  	</view>
			   </view>
			   <!-- 测试 -->
			   <view @click="onlist(item.title)" v-for="(item,index) in list" :key="index" :class="[{'white':title==item.title},'water']">{{item.title}}</view>
			   
			</view>
			<!-- 右边内容 -->
			<view class="RightCenter">
				<view @click="changesite" class="Center">
					<view class="Center-son">
						海底捞醇香牛油火锅底料
					</view>
					<view class="select">
						<image :src="site" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 确定按钮 -->
		<view class="bottomfixed flexcenter">
			<button @click="gocard" class="btn">确定 ( {{sum}} )</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 测试列表
				list:[
					{title:"火锅底料"},
					{title:"速冻食品"},
					{title:"华为手机"},
					{title:"豆汁"},
					{title:"水果"},
					{title:"冰激凌"},
					{title:"桃子"},
					{title:"苹果"},
					{title:"粒子"},
					{title:"栗子"},
					{title:"橘子"}
				],
				title:"",
				white:'white',
				classop3:'option2 op3',
				isop3:false,
				classop2:'option1 op3',
				isop2:false,
				v1:'v1',
				v2:'v1',
				site:'../../../static/image/system/Vector.png',
				is:false,
				sum:1
			}
		},
		methods: {
			changesite(){
				this.is = !this.is
				this.is ? this.site = "" : this.site = '../../../static/image/system/Vector.png'
				
			},
			// 返回上一页
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 点击切换选中
			onlist(value){
				this.title = value
			},
			// 点击跳转到客户排行榜-筛选-选择卡片
			gocard(){
				//跳转盘点单库存
				uni.navigateTo({
					url:'/pages/workbench/kucun/pandiankc'
				})
				uni.navigateTo({
					url:"/pages/workbench/kucun/kehuphbsxxzkp",
					success:res=>{},
					fail:()=>{},
					complete:()=>{}
					
				})
			},
			optionput(v){
				if(v==1){
					this.isop3 = !this.isop3
					this.isop3 ? this.classop3 = 'option2' : this.classop3 = 'option2 op3'
					this.isop3 ? this.v1 = 'v11' : this.v1 = 'v1'
				}
				if(v==2){
					this.isop2 = !this.isop2
					this.isop2 ? this.classop2 = 'option1' : this.classop2 = 'option1 op3'
					this.isop3 = false
					this.v1 = 'v1'
					this.isop3 ? this.classop3 = 'option2' : this.classop3 = 'option2 op3'
					this.isop2 ? this.v2 = 'v11' : this.v2 = 'v1'
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.white{
		background-color: white;
	}
	// 测试
	.water{
		width: 100%;
		height: 92rpx;
		border-bottom: 1px solid #fff;
		text-align: center;
		line-height: 92rpx;
	}
	.bottomfixed{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
	}
	.btn{
		width: 212rpx;
		height: 62rpx;
		font-size: 28rpx;
		line-height: 62rpx;
		border-radius: 20px;
		background-color: #00B855;
		color: #fff;
		margin-top: 24rpx;
		border: none;
	}
	.tab{
		overflow: hidden;
		background-color: #f7f7f7;
	}
	.op3{
		display: none;
	}
	// 顶部自定义
	.header-top-box {
		height: 170rpx;
		width: 100%;
	}

	.header-top {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		padding: 96rpx 40rpx 10rpx;
	}

	.top-image {
		margin-top: 20rpx;
		width: 20rpx;
		height: 38rpx;
		background: url('@/static/image/system/return.png') no-repeat;
		background-size: 20rpx 38rpx;
	}

	// 自定义顶部搜索
	.searchinput {
		margin-top: 20rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		padding: 12rpx 20rpx;
		input {
			width: 100%;
		}
	}

	.searchimg {
		width: 24rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
		margin-right: 30rpx;
	}
	// 左边下拉导航栏
	.Leftdown::-webkit-scrollbar {
	display: none;
	}
	.Leftdown{
		background-color: #f7f7f7;
		width: 218rpx;
		height: calc(100vh - 270rpx);
		overflow-x: hidden;
		overflow-y: scroll;
		float: left;
		// background-color: aqua;
		margin-top: 30rpx;
		.option,.option1,.option2{
			width: 100%;
			height: 92rpx;
			// background-color: aquamarine;
			border-bottom: 1px solid #fff;
			color: #0BBDCB;
			text-align: center;
			view{
				display: inline-block;
			}
			.v1{
				width: 0;
				transform: translate(-5rpx,10rpx);
				border: 14rpx solid transparent;
				border-top: 14rpx solid #0BBDCB;
			}
			.v11{
				width: 0;
				transform: translate(-5rpx,-5rpx);
				border: 14rpx solid transparent;
				border-bottom: 14rpx solid #0BBDCB;
			}
			.v2{
				line-height: 92rpx;
			}
			.v3{
				width: 30rpx;
				height: 30rpx;
				background-color: #0BBDCB;
				color: #fff;
				border-radius: 50%;
				font-size: 16rpx;
				line-height: 30rpx;
				transform: translate(5rpx,-3rpx);
				
			}
			
		}
	}
	// 右边内容部分
	.RightCenter{
		width: 530rpx;
		height: calc(100vh - 270rpx);
		float: right;
		margin-top: 30rpx;
		background-color: white;
		.Center{
			width: 95%;
			margin: 0 auto;
			height: 100rpx;
			
			line-height: 100rpx;
			border-bottom: 1px solid #f7f7f7;
			.Center-son{
				margin-left: 22rpx;
				font-size: 28rpx;
				display: inline-block;
				
			}
			.select{
				width: 30rpx;
				height: 30rpx;
				float: right;
				margin-right: 20rpx;
				transform: translateY(10rpx);
				display: inline-block;
				image{
					width: 100%;
					height: 100%;
				}
			}
		
		}
	}
</style>

